<template>
  <el-container class="homePage">
    <el-aside width="260px" class="aside">
      <div class="asideLogo">
        <img src="http://fat.teyunquan.com/front/logo.39fc7d9.png" />
      </div>
      <el-menu
        background-color="#181c27"
        active-text-color="#fff"
        text-color="#656876"
        router unique-opened :default-active="myPath" exact
      >
        <Nav :menuData="menuData" />
      </el-menu>
    </el-aside>
    <el-container>
      <el-header class="homeBread">
        <div class="clearfix">
           <Breadcrumb />
          <div class="homeAccount">
            <span class="headIocn">
              <span class="iconfont el-icon-wenhao"></span>
              <span @click="intoNews" class="iconfont el-icon-news active"></span>
            </span>
            <div class="userAccount">
              <el-dropdown trigger="click" placement="bottom-start"  @command="handleCommand">
                <p class="el-dropdown-link headerSelect">
                  <span class="img"><img src="@a/images/icon5.png"></span>
                  <span class="name">{{this.$store.state.company_name}}</span>
                  <i class="el-icon-caret-bottom el-icon--right"></i>
                </p>
                <el-dropdown-menu slot="dropdown" class="list">
                  <el-dropdown-item command="loginout">退出 <i class="el-icon-switch-button"></i></el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
          </div>
        </div>
      </el-header>
      <el-main>
        <router-view />
      </el-main>
    <el-footer  class="footer">
      <div>
      <a href="https://beian.miit.gov.cn/?spm=a2cmq.17630000.J_9220772140.109.279279feGqklF0#/Integrated/index">京ICP备20024757号-2</a>
      </div>
    </el-footer>

    </el-container>
  </el-container>
</template>

<script>
import Nav from "@/components/Nav.vue";
import Breadcrumb from "@/components/Breadcrumb.vue";
export default {
  components: { Nav, Breadcrumb },
  data() {
    return {
      myPath:'/workbench',
      menuData: [],
      companyName:'',
    };
  },
  created () {
    this.getMenuList()
    //监视$route的变化
      console.log(this.$route.matched);

    if(this.$route.matched.length==2 ){
      this.myPath = this.$route.matched[1].path;
    }else if(this.$route.matched.length==3 || this.$route.matched.length==4){
      this.myPath = this.$route.matched[2].path;
       console.log(this.$route.matched[2].path);
    }
    this.getCompanyName()
  },
  watch: {
	//监视$route的变化

    $route: function(to, from) { 
      //设置导航菜单高亮的路径为前两段路径
      console.log(this.$route.matched);
      if(this.$route.matched.length==2){
        this.myPath = this.$route.matched[1].path;
      }else if(this.$route.matched.length==3 || this.$route.matched.length==4){
        this.myPath = this.$route.matched[2].path;
        console.log(this.$route.matched[2].path);
      }
    },
  },
  methods: {
    // 请求菜单
    async getMenuList(){
      let res = await this.$http.loginApi.menuList()
      this.menuData=res.data
      console.log(this.menuData);
    },
    async getCompanyName(){
      let res = await this.$http.loginApi.workbench();
      if(res.status = 200){
        // console.log(res.data);
        sessionStorage.setItem('company_name',res.data.company_name)
        this.$store.commit('setCompanyName',res.data.company_name);

      }
    },
    //进入消息中心
    intoNews(){
      this.$router.push('/message')
    },
    handleCommand(val){
      if(val == 'loginout'){
        sessionStorage.clear()
        this.$router.push('/login')
      }
    },
  },
  
};
</script>

<style>
.homeAccount{
    display: flex;
    align-items: center;
}

.userAccount{
  padding: 12px 0;
    display: flex;
  align-items: center;
}
.headerSelect{
  height: 40px;
  line-height: 40px;
  background: rgba(143, 146, 161, 0.09);
  border-radius: 16px;
  display: flex;
  align-items: center;
  padding: 0 16px;
  cursor: pointer;

}
.headerSelect .img{
  width:24px;
  height: 24px;
  margin-right: 8px;
}
.headerSelect .name{
  color: #919EAB;

}
.userAccount i{
  color: #8F92A1;
}
.headIocn {
  padding-right: 24px;
  margin-right: 24px;
}
.headIocn span{
  font-size: 24px;
  color: #8F92A1;
  margin-left: 18px;
  cursor: pointer;
  position: relative;
}
.headIocn span.active::after{
  content: '';
  display: block;
  position: absolute;
  top: 1px;
  right: 0px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1px solid #fff;
  background: #F5222D;
}

.asideLogo{
  width:130px;
  margin: 20px auto;
}
</style>